<template>
  <div>
    <scroll-loadmore
      class="wrapper"
      ref="scrollContent"
      :data="lastdata"
      :pulldown="pulldown"
      :pullup="pullup"
      :flag="flag"
      :listenScroll="listenScroll"
      @pulldown="loadData"
      @scroll="refreshTip"
      @getData="getData"
      @scrollToEnd="shanglajiazai"
    >
      <ul class="icon-wrapper">
        <li
          class="icon-list border-1px"
          v-for="(item, index) in lastdata"
          :key="index"
        >
          <i class="iconfont" :class="item.icon"></i>
          <span class="title">{{ item.name }}</span>
        </li>
      </ul>
    </scroll-loadmore>
  </div>
</template>
<script>
import scrollLoadmore from './scrollLoadmore'
export default {
  components: {
    scrollLoadmore,
  },
  data() {
    return {
      lastdata: this._initData(),
      flag: false,
      count: 1, // 页码
      pagesize: 20, // 每页笔数
      listenScroll: true,
      pulldown: true,
      pullup: true,
    }
  },
  created() {
    this.refreshData()
  },
  methods: {
    loadData() {
      this.refreshData()
      this.$refs.scrollContent.loadData()
    },
    refreshTip(pos) {
      if (pos.y > 40) {
        this.$refs.scrollContent.refreshTip()
      }
    },
    shanglajiazai() {
      this.$refs.scrollContent.shanglajiazai()
    },
    getData() {
      this.count = this.count + 1
      let tempData = this._initData()
      if (!tempData.length) {
        this.flag = true
      } else {
        this.lastdata = this.lastdata.concat(this._initData())
      }
    },
    refreshData() {
      this.count = 1
      this.lastdata = this._initData()
      this.flag = false
    },
    _initData() {
      let icondata = [
        {
          icon: 'icon-sousuo',
          name: 'icon-sousuo',
        },
        {
          icon: 'icon-dianpu',
          name: 'icon-dianpu',
        },
        {
          icon: 'icon-huiyuanqia',
          name: 'icon-huiyuanqia',
        },
        {
          icon: 'icon-xiugaioryijian',
          name: 'icon-xiugaioryijian',
        },
        {
          icon: 'icon-shoucangxuanzhong',
          name: 'icon-shoucangxuanzhong',
        },
        {
          icon: 'icon-shoucang',
          name: 'icon-shoucang',
        },
        {
          icon: 'icon-quanbudingdan',
          name: 'icon-quanbudingdan',
        },
        {
          icon: 'icon-dianzan',
          name: 'icon-dianzan',
        },
        {
          icon: 'icon-app',
          name: 'icon-app',
        },
        {
          icon: 'icon-browser',
          name: 'icon-browser',
        },
        {
          icon: 'icon-form',
          name: 'icon-form',
        },
        {
          icon: 'icon-cart',
          name: 'icon-cart',
        },
        {
          icon: 'icon-home',
          name: 'icon-home',
        },
        {
          icon: 'icon-mine',
          name: 'icon-mine',
        },
        {
          icon: 'icon-31daifahuo',
          name: 'icon-31daifahuo',
        },
        {
          icon: 'icon-31daifukuan',
          name: 'icon-31daifukuan',
        },
        {
          icon: 'icon-31daishouhuo',
          name: 'icon-31daishouhuo',
        },
        {
          icon: 'icon-31daipingjia',
          name: 'icon-31daipingjia',
        },
        {
          icon: 'icon-tuikuantuihuo',
          name: 'icon-tuikuantuihuo',
        },
        {
          icon: 'icon-zhongtumoshi',
          name: 'icon-zhongtumoshi',
        },
        {
          icon: 'icon-xuanzekuangmoren',
          name: 'icon-xuanzekuangmoren',
        },
        {
          icon: 'icon-shanchu',
          name: 'icon-shanchu',
        },
        {
          icon: 'icon-gouwuchetianjia',
          name: 'icon-gouwuchetianjia',
        },
        {
          icon: 'icon-shouhuodizhi',
          name: 'icon-shouhuodizhi',
        },
        {
          icon: 'icon-wodefankui',
          name: 'icon-wodefankui',
        },
        {
          icon: 'icon-yijianfankui',
          name: 'icon-yijianfankui',
        },
        {
          icon: 'icon-shanchu3',
          name: 'icon-shanchu3',
        },
        {
          icon: 'icon-bianji',
          name: 'icon-bianji',
        },
        {
          icon: 'icon-huishouzhan7',
          name: 'icon-huishouzhan7',
        },
        {
          icon: 'icon-fenlei-copy',
          name: 'icon-fenlei-copy',
        },
        {
          icon: 'icon-chenggong',
          name: 'icon-chenggong',
        },
        {
          icon: 'icon-xuanzekuangxuanzhong',
          name: 'icon-xuanzekuangxuanzhong',
        },
        {
          icon: 'icon-bangzhuguanyuwomen',
          name: 'icon-bangzhuguanyuwomen',
        },
        {
          icon: 'icon-cancel-1-copy',
          name: 'icon-cancel-1-copy',
        },
        {
          icon: 'icon-chenggong1',
          name: 'icon-chenggong1',
        },
        {
          icon: 'icon-wodedaifahuo3dtouchshangpinxiangqing',
          name: 'icon-wodedaifahuo3dtouchshangpinxiangqing',
        },
        {
          icon: 'icon-lajitong',
          name: 'icon-lajitong',
        },
        {
          icon: 'icon-shangpin',
          name: 'icon-shangpin',
        },
        {
          icon: 'icon-zhifu',
          name: 'icon-zhifu',
        },
        {
          icon: 'icon-gouwu',
          name: 'icon-gouwu',
        },
        {
          icon: 'icon-faxian',
          name: 'icon-faxian',
        },
        {
          icon: 'icon-vivo',
          name: 'icon-vivo',
        },
        {
          icon: 'icon-discover',
          name: 'icon-discover',
        },
        {
          icon: 'icon-shouye1',
          name: 'icon-shouye1',
        },
        {
          icon: 'icon-yunshuzhongwuliu-xianxing',
          name: 'icon-yunshuzhongwuliu-xianxing',
        },
        {
          icon: 'icon-baoguofahuo-xianxing',
          name: 'icon-baoguofahuo-xianxing',
        },
        {
          icon: 'icon-shezhi-xianxing',
          name: 'icon-shezhi-xianxing',
        },
        {
          icon: 'icon-shouquan',
          name: 'icon-shouquan',
        },
        {
          icon: 'icon-dianzan1',
          name: 'icon-dianzan1',
        },
        {
          icon: 'icon-share_icon',
          name: 'icon-share_icon',
        },
        {
          icon: 'icon-dongtaixuanzhong',
          name: 'icon-dongtaixuanzhong',
        },
        {
          icon: 'icon-tijiao',
          name: 'icon-tijiao',
        },
        {
          icon: 'icon-VIVO',
          name: 'icon-VIVO',
        },
        {
          icon: 'icon-youjiantou',
          name: 'icon-youjiantou',
        },
        {
          icon: 'icon-zuojiantou',
          name: 'icon-zuojiantou',
        },
        {
          icon: 'icon-gouwuche',
          name: 'icon-gouwuche',
        },
        {
          icon: 'icon-dingdan',
          name: 'icon-dingdan',
        },
        {
          icon: 'icon-wode',
          name: 'icon-wode',
        },
        {
          icon: 'icon-shanchu1',
          name: 'icon-shanchu1',
        },
        {
          icon: 'icon-qijiandian',
          name: 'icon-qijiandian',
        },
        {
          icon: 'icon-shanchu2',
          name: 'icon-shanchu2',
        },
        {
          icon: 'icon-shouye2',
          name: 'icon-shouye2',
        },
        {
          icon: 'icon-shouye',
          name: 'icon-shouye',
        },
        {
          icon: 'icon-wo',
          name: 'icon-wo',
        },
        {
          icon: 'icon-shangchao',
          name: 'icon-shangchao',
        },
        {
          icon: 'icon-changyonggoupiaorenshanchu',
          name: 'icon-changyonggoupiaorenshanchu',
        },
        {
          icon: 'icon-praise',
          name: 'icon-praise',
        },
        {
          icon: 'icon-dongtai',
          name: 'icon-dongtai',
        },
        {
          icon: 'icon-shouye_xuanzhong',
          name: 'icon-shouye_xuanzhong',
        },
        {
          icon: 'icon-wode-',
          name: 'icon-wode-',
        },
        {
          icon: 'icon-gouwuche-xuanzhong',
          name: 'icon-gouwuche-xuanzhong',
        },
        {
          icon: 'icon-icon--',
          name: 'icon-icon--',
        },
        {
          icon: 'icon-fenleixuanzhong',
          name: 'icon-fenleixuanzhong',
        },
        {
          icon: 'icon-tubiaolunkuo-',
          name: 'icon-tubiaolunkuo-',
        },
        {
          icon: 'icon-tubiaolunkuo-1',
          name: 'icon-tubiaolunkuo-1',
        },
        {
          icon: 'icon-fenlei3',
          name: 'icon-fenlei3',
        },
        {
          icon: 'icon-dingdanquxiao',
          name: 'icon-dingdanquxiao',
        },
        {
          icon: 'icon-shoucangxuanzhong1',
          name: 'icon-shoucangxuanzhong1',
        },
        {
          icon: 'icon-zy_peisong',
          name: 'icon-zy_peisong',
        },
      ]
      return icondata
    },
  },
}
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #93999f;
}
.wrapper {
  position: absolute;
  top: 40px;
  bottom: 55px;
  width: 100%;
  overflow: hidden;
}
.icon-wrapper .icon-list {
  width: 100%;
  padding: 12px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}
.icon-wrapper .icon-list .iconfont,
.icon-wrapper .icon-list .title {
  display: inline-block;
  vertical-align: top;
  line-height: 24px;
}
.iconfont {
  font-size: 24px;
  color: #c71585;
}
.title {
  margin-left: 24px;
  font-size: 16px;
  color: #1e90ff;
}
</style>
